<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			#div1{
				width: 300px;
				height: 300px;
				background-color: beige;
			}
			#div2{
				width: 300px;
				height: 300px;
				background-color:aqua;
			}
		</style>
	</head>
	<body>
		<!--//1.按钮和DIV的单击事件（三种绑定方式-->
		<input type="button" name="" id="id1" value="按钮1" onclick="dianji()"/>
		<input type="button" name="" id="id2" value="按钮2" />
		<input type="button" name="" id="id3" value="按钮3" />
		<!--2. 300px*300px的DIV 进入事件，离开事件，移动事件（三种绑定方式）-->
		<div id="div1" onmouseenter="mouseenter()" onmouseleave="mouseleave()"
			onmousemove="mousemove()">
		</div>
		<!--div监听-->
		<div id="div2">
			
		</div>
		<input type="button" name="" id="" value="为div2添加监听器" onclick="jianadd()" />
		<input type="button" name="" id="" value="为div2删除监听器" onclick="jiandel()" />
		<!--3.登入页面,用户名输入框，密码输入框，提交按钮-->
		用户名：<input type="text" name="" id="name" value="" onfocus="huoqu()"
		onblur="shiqu()"/>
		密码：<input type="password" name="" id="pwd" value="" onfocus="huoqumima()"
		onblur="shiqumima()"/>
		<input type="button" name="" id="" value="提交" onclick="panduan()" />
	</body>
	<!--//1.在标签内绑定函数-->
	<script type="text/javascript">
		function dianji(){
			console.log('单击了一次');
		}
		//2.找到该元素
		document.getElementById('id2').onclick=dianji;
		//3监听器
		document.getElementById('id3').addEventListener('click',dianji);
		//进入事件
		function mouseenter(){
			console.log('进入div');
		}
		//离开事件
		function mouseleave(){
			console.log('离开div');
		}
		//移动事件
		function mousemove(){
			console.log('在div内移动');
		}
		//3.1 用户名框获取焦点事件，控制台输出：用户在输入名称
		function huoqu(){
			console.log('用户在输入名称');
		}
		// 3.2  用户名框失去焦点事件，判断是否有输入文字，没有则alert没有输入用户名
		function shiqu(){
			if(document.getElementById('name').value==''){
				alert('没有输入用户名');
			}
		}
		// 3.3  密码框获取焦点事件，控制台输出：用户在输入密码
		function huoqumima(){
			console.log('用户在输入密码');
		}
		//3.4  密码框失去焦点事件，判断是否有输入文字，没有则alert没有输入密码
		function shiqumima(){
			if(document.getElementById('pwd').value==''){
				alert('没有输入密码');
			}
		}
		//3.5 点击提交按钮，判断用户和密码是否为空。用户名为空，提示‘用户名为空’
		//密码为空，提示‘密码为空’；均为空，则提示‘用户名和密码为空
		function panduan(){
			if(document.getElementById('name').value=='' && document.getElementById('pwd').value==''){
				alert('用户名和密码为空');
			}else{
				if(document.getElementById('name').value==''){
				alert('用户名为空');
			}
				if(pwd.value==''){
				alert('密码为空');
			} 
			}
			
		}
		//4.实现DIV移动事件，采用监听器方式操作，可实现添加和清除监听器功能。mousemove
		function jianadd(){
			document.getElementById('div2').addEventListener('mousemove',mousemove)
		}
		function jiandel(){
			document.getElementById('div2').removeEventListener('mousemove',mousemove)
		}
	</script>
</html>